<template>
  <div>
    <el-dropdown trigger="hover" :show-timeout="0" class="cP">
      <span>
        <el-icon
          :style="{
            color: $store.state.navIsTo
              ? 'var(--menuColorFont)'
              : 'var(--navColorFont)',
          }"
          class="llt-icon-size position-relative"
          ><bell
        /></el-icon>
        <div class="llt-badge"></div>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-tabs
            class="header-message-tabs p20"
            v-model="activeName"
            @tab-click="handleTagMessageClick"
          >
            <el-tab-pane label="通知(1)" name="first">
              <el-scrollbar height="200px">
                <div class="item" v-for="item in 20" :key="item">
                  <div>你收到了{{ item + 1 }}的周报</div>
                  <div class="time">2020-1-1</div>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="代办(1)" name="third">
              <el-scrollbar height="200px">
                <p class="item" v-for="item in 20" :key="item">{{ item }}</p>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
const internalInstance = getCurrentInstance(); //获取当前实例
const route = internalInstance?.appContext.config.globalProperties.$route;
import SearchDocument from "/@/components/search/search.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
//消息 tabs start
let activeName = ref("first");
const handleTagMessageClick = (e: any) => {
  activeName.value = e.paneName;
};
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.menu-logo-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  height: 54px;
  background-color: #001529;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
